<template>
    <div class="col-setting-container">
        <el-drawer v-model="visible" title="列设置" size="500px">
            <div class="table-main">
                <el-table border h-full :data="colSetting">
                    <el-table-column label="列名" align="center" prop="label"></el-table-column>
                    <el-table-column label="展示" align="center" prop="isShow" v-slot="scope">
                        <el-switch v-model="scope.row.isShow"></el-switch>
                    </el-table-column>
                    <el-table-column label="排序" align="center" prop="sort" v-slot="scope">
                        <el-switch v-model="scope.row.sort"></el-switch>
                    </el-table-column>
                    <el-table-column label="展示搜索条件" align="center" prop="sort" v-slot="scope">
                        <el-switch v-model="scope.row.isSearch" @change="handleShowSearch" v-if="((scope.row.search && !scope.row.searchSlot) || (!scope.row.search && scope.row.searchSlot))"></el-switch>
                        <el-switch v-model="isSearch" disabled v-else title="没有搜索条件"></el-switch>
                    </el-table-column>
                </el-table>
            </div>
            <template #empty>
                <div class="table-empty">
                    <img src="@/assets/images/notData.png" alt="notData" />
                    <div>暂无可配置列</div>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { SearchFormType } from '@/type/proTable';

defineProps<{
    colSetting: SearchFormType[]
}>()

const emits = defineEmits(['initSearch'])

const visible = ref(false)

const handleShow = () => {
    visible.value = true
}

const isSearch = ref(false)
const handleShowSearch = () => {
    emits('initSearch')
}

defineExpose({
    handleShow
})

</script>

<style lang="scss">
.col-setting-container {
    .el-drawer__title {
        font-size: 18px;
    }

    .el-drawer__header {
        margin-bottom: 8px;
        padding: 8px;
        border-bottom: 1px solid var(--el-border-color);
    }

    .table-main {
        width: 100%;
        height: 100%;
    }
}
</style>